import React, { Component, Suspense } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import PageLoading from '@/components/PageLoading';
import { FormattedMessage } from 'umi-plugin-react/locale';
import { Row, Col, Card, Icon, Tooltip, Form, Button, Progress, Tabs, Badge, Spin } from 'antd';
import styles from "./twoIndex.less";
import bulb from '@/assets/medicalKnowledge/灯泡.png';
import SimilarAsk from './similarAsk'
import AbnormalQ from './abnormalQ'

import bj from '@/assets/medicalKnowledge/bj-c.png';
const bgBround = {
  background: 'url(' + bj + ')',
  width: '100%',
  height: '100%',
  backgroundSize: '100% 100%',
}
const { TabPane } = Tabs;

class MedicalKnowledge extends Component {
  constructor(props) {
    super(props);
    this.state = {

      leName: 0,
      xsName: 0,
      ProgressQH: false,
      ProgressWZ: false,
      totala: 0,
      totalb: 0,
      ProgressName: 1,
      checkTime: '',
      text5: '',
      text6: '',
      logins: false
    };
  }

  componentDidMount() {
    // this.similarAskList()
    // this.timeB()
    console.log(this.props.location.params)
    this.fetch()
  }

  // eslint-disable-next-line react/sort-comp
  fetch = () => {
    this.setState({ logins: true })
    // knowledEexamineChecksstatus
    const { dispatch, currentUser } = this.props;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'medicalKnowledge/knowledEexamineChecksstatus',
        payload: {},
        callback: res => {
          this.setState({ logins: false })
          console.log('获取状态', res);
          if (res.status === 'success') {
            this.physical()
          }
          if (res.status === 'wait') {
            this.timeB()
          }
          if (res.status === 'none') {
            this.physical()
          }
          // this.timeB()
        },
      });
    });
  }

  timeB = () => {
    let { leName } = this.state
    setTimeout(() => {
      const { dispatch, currentUser } = this.props;
      this.reqRef = requestAnimationFrame(() => {
        dispatch({
          type: 'medicalKnowledge/knowledgeExamineCheckProcess',
          payload: {},
          callback: res => {
            console.log('进度条', res);
            leName = res.process   // 联调打开 
            if (res.process === 1) {
              this.setState({
                leName: 99
              }, () => {
                setTimeout(() => {
                  this.physical()

                }, 1000)
              })

              // this.setState({ num: res.process }, () => {
              //   this.setState({  ProgressQH: true,ProgressWZ: false, leName: this.state.xsName }, () => {
              //     this.fetch()
              //   })
              // })
            } else if (res.process === 0) {
              this.setState({ ProgressName: 3 }, () => {
                this.timeB()
              })
              // this.setState({ percent: res.process }, () => {
              //   setTimeout(() => {
              //     this.setState({ num: res.process }, () => {
              //       this.time()
              //     })
              //   }, 1000)
              // })
            } else {
              this.setState({ ProgressName: 3 })
              const number = res.process
              console.log(Math.floor(Number(number * 100)))
              this.setState({ leName: Math.floor(Number(number * 100)) }, () => {
                setTimeout(() => {
                  this.setState({}, () => {
                    this.timeB()
                  })
                }, 1000)
              })
            }
          },
        });
      });
    }, 1000)
  }

  // 获取体检数据  knowledgeExamineCheckStatus
  physical = () => {
    console.log('体检数据');
    const { dispatch, currentUser } = this.props;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'medicalKnowledge/fetch',
        payload: {},
        callback: res => {
          console.log('体检数据', res);
          this.setState({
            leName: res.score,
            checkTime: res.checkTime,
            text5: res.resList[5].text,
            text6: res.resList[6].text,
            ProgressName: 1
          }, () => {

          })
        },
      });
    });
  }




  detectiona = () => { // 重新扫描
    this.setState({ ProgressName: 2 })
  }

  detection = () => {// 开始扫描
    this.setState({ leName: 0, ProgressName: 3 }, () => {
      const { dispatch, currentUser } = this.props;
      this.reqRef = requestAnimationFrame(() => {
        dispatch({
          type: 'medicalKnowledge/retest',
          payload: {},
          callback: res => {
            console.log('重新检测', res);
            this.timeB()
          },
        });
      });
    })
  }

  time = () => {
    let { leName } = this.state
    setTimeout(() => {
      leName = leName + 1
      this.setState({ leName }, () => {
        if (leName < 101) {
          this.time()
        } else {
          this.setState({ ProgressName: 1 })
        }
      })
    }, 50)
  }

  callback = (key) => {
    console.log(key);
  }

  totala1 = (a) => {
    this.setState({ totala: a })
  }

  totala2 = (a) => {
    this.setState({ totalb: a })
  }


  render() {
    return (
      <Suspense fallback={<PageLoading />}>
        <PageHeaderWrapper>
          {/* <div className={styles.backgroundp}> */}
          <Spin spinning={this.state.logins}>
            <Row className='paddingCard' style={{ height: 262 }} span={24}>
              <Card
                bordered={false}
                style={{ borderRadius: 5 }}
              >

                <Card
                  className={styles.backimg}
                  style={bgBround}
                  bordered={false}
                >
                  {
                    this.state.ProgressName === 1 ? <div style={{ marginTop: 0, height: 150 }} className={styles.composings}>
                      <div style={{ flexBasis: '10%' }}></div>
                      <div style={{ flexBasis: '10%', marginTop: 35 }}>
                        <Icon style={{ fontSize: 73, color: '#f1a500' }} type="check" />
                      </div>
                      <div style={{ flexBasis: '2%' }}></div>
                      <div style={{ flexBasis: '40%', marginTop: 50 }}>
                        <p style={{ marginBottom: 0, color: '#000' }}>扫描完成</p>
                        <p style={{ marginBottom: 0, color: '#000' }}>{`体检时间:${this.state.checkTime}`} <span style={{ color: '#f2b242' }}>{`${this.state.text6}，${this.state.text5}`}</span></p>
                      </div>
                      <div style={{ flexBasis: '10%' }}></div>
                      <div className='progressColor' style={{ marginTop: 40 }}>
                        <div onClick={this.detectiona} className={styles.buttons}>重新扫描</div>
                      </div>
                    </div> : null
                  }
                  {
                    this.state.ProgressName === 2 ? <div style={{ marginTop: 0, height: 150 }} className={styles.composings}>
                      <div style={{ flexBasis: '10%' }}></div>
                      <div style={{ flexBasis: '10%', marginTop: 30 }}>
                        <img src={bulb} alt="" />
                      </div>
                      <div style={{ flexBasis: '3%' }}></div>
                      <div style={{ flexBasis: '40%', marginTop: 50 }}>
                        <p style={{ marginBottom: 0, color: '#000' }}>定期扫描清理知识库中相似问的问题、不同问题之间相似的问题以及同一问题中的异常问法,能够让机器人对的理解更清楚，回答更准确</p>
                      </div>
                      <div style={{ flexBasis: '10%' }}></div>
                      <div className='progressColor' style={{ marginTop: 40 }}>
                        <div onClick={this.detection} className={styles.buttons}>开始扫描</div>
                      </div>
                    </div> : null
                  }
                  {
                    this.state.ProgressName === 3 ? <div style={{ marginTop: 0, height: 150 }} className={styles.composings}>
                      <div style={{ flexBasis: '10%' }}></div>
                      <div style={{ flexBasis: '10%', marginTop: 10 }}>
                        <Progress
                          className='ycolortwo'
                          strokeColor='#f1a500'
                          type="circle"
                          percent={this.state.leName}
                          strokeWidth={5}
                          width={135}
                          strokeWidth={6}
                        />
                      </div>
                      <div style={{ flexBasis: '2%' }}></div>
                      <div style={{ flexBasis: '40%', marginTop: 50 }}>
                        <div style={{ marginBottom: 0 }} className={styles.center}>
                          <span>知识库体检中</span>
                          <span className={styles.loading}></span>
                        </div>
                        <p style={{ marginBottom: 0, color: '#000' }}>您可以关掉页面，稍后再来查看</p>
                      </div>
                      <div style={{ flexBasis: '10%' }}></div>
                      <div className='progressColor' style={{ marginTop: 40 }}>
                      </div>
                    </div> : null
                  }


                </Card>
              </Card>
              <div style={{ height: 24 }}></div>
              <Row>
                <Card
                  bordered={false}
                >
                  <div className='tabYs'>
                    <Tabs defaultActiveKey={this.props.location.params.id} onChange={this.callback}>
                      <TabPane forceRender={true} tab={`相似问法(${this.state.totala})`} key="1">
                        <SimilarAsk
                          ProgressName={this.state.ProgressName}
                          total={this.state.totala}
                          totala1={this.totala1}
                        />
                      </TabPane>
                      <TabPane forceRender={true} tab={`异常问法(${this.state.totalb})`} key="2">
                        <AbnormalQ
                          ProgressName={this.state.ProgressName}
                          totala2={this.totala2}
                        />
                      </TabPane>
                    </Tabs>
                  </div>
                </Card>
              </Row>
            </Row>
          </Spin>
          {/* </div> */}
        </PageHeaderWrapper>
      </Suspense>
    );
  }
}

export default connect(({ user }) => ({ // 全局数据
  currentUser: user.currentUser,
}))(Form.create()(MedicalKnowledge));